<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.导入jQuery框架文件 -->
    <script src="../jquery/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div>层1</div>
    <div>层2</div>

    <script>
        //给所有div添加红色,层中文字大小为20px，文字颜色是橙色
        // var divs=document.querySelectorAll('div');
        // for(var i=0;i<divs.length;i++){
        //     divs[i].style.border='1px solid red';
        //     divs[i].style.fontSize='20px';
        //     divs[i].style.color='orange';
        // }

        // $(document).ready(function(){
        //     $('div').css('border','1px solid red').css('color','orange').css('fontSize','orange');
        // })
        $(function(){
            //写法①   调用jQuery对象方法
            // $('div').css('border','1px solid red').css('color','orange').css('fontSize','orange');
            
            //写法②  (转换为元素对象)调用元素对象方法操作
            // var $divs=$('div');
            // for(var i=0;i<$divs.length;i++){
            //     $divs[i].style.border='1px solid red';
            // }

            var divs=document.querySelectorAll('div');
            $('divs').css('border','1px solid red');
        })
       
    </script>
</body>
</html>